<template>
  <div class="drawer-layouts">
    <el-drawer
      ref="addmanager"
      :title="detailTitle"
      :visible.sync="drawer"
      @closed="closedinvitation"
      size="50%"
    >
      <div style="padding: 10px 20px">
        <el-form
          label-position="left"
          :inline="true"
          size="small"
          :model="mansgerform"
          :rules="rmanagerRules"
          ref="refmanager"
        >
          <el-row>
            <el-form-item
              label="用户名称"
              label-width="80px"
              prop="name"
              class="form-box-item"
            >
              <el-input
                clearable
                maxlength="8"
                placeholder="请输入用户名称"
                v-model="mansgerform.name"
              />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item
              label="手机号"
              label-width="80px"
              prop="mobile"
              class="form-box-item"
            >
              <el-input
                clearable
                onkeyup="value=value.replace(/\D/g,'')"
                placeholder="请输入手机号"
                v-model.number="mansgerform.mobile"
              />
            </el-form-item>
          </el-row>

          <el-row>
            <el-form-item
              label="负责区域"
              label-width="80px"
              prop="receivers"
              class="form-box-item"
            >
              <el-select
                @change="provinceWay"
                v-model="mansgerform.province_id"
                placeholder="请选择省份"
              >
                <el-option
                  v-for="item in provinceList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <el-select
                style="margin-left: 10px"
                :disabled="cityList.length == 0"
                v-model="mansgerform.city_id"
                placeholder="请选择城市(请先选择省份)"
              >
                <el-option key="0" label="全部" :value="0"></el-option>
                <el-option
                  v-for="item in cityList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-row>

          <el-form-item
            label="岗位级别"
            label-width="80px"
            prop="market_role_id"
            class="form-box-item"
          >
            <el-select
              clearable
              v-model="mansgerform.market_role_id"
              filterable
            >
              <el-option
                v-for="item in SupplierList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关联用户ID" prop="user_id" class="form-box-item">
            <el-input
              clearable
              maxlength="8"
              onkeyup="value=value.replace(/\D/g,'')"
              placeholder="请输入用户ID"
              v-model.number="mansgerform.user_id"
            />
          </el-form-item>
        </el-form>

        <el-row style="margin: 100px auto">
          <el-col :span="11" style="text-align: right">
            <!-- <el-button @click="closemansger()">取消</el-button> -->
            <el-button
              style="width: 200px"
              type="primary"
              @click="submitForms()"
              >确认</el-button
            >
          </el-col>
        </el-row>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getRegionList } from "@/api/user/index";
import { addMansger, rolelist } from "@/api/manager/index";

export default {
  name: "addmanager",
  props: ["detailTitle", "managerformdata"],
  components: {},
  data() {
    var picValidator = (rule, value, callback) => {
      if (!this.mansgerform.province_id) {
        callback(new Error("请选择负责区域"));
      } else {
        callback();
      }
    };
    var picValigangwei = (rule, value, callback) => {
      if (!this.mansgerform.market_role_id) {
        callback(new Error("请选择岗位"));
      } else {
        callback();
      }
    };
    return {
      roleForm: {
        params: {
          name: "",
          phone: "",
        },
        page: 1,
        count: 30,
      },
      id: "", //编辑id
      regionList: [], //省市数据
      SupplierList: [],
      drawer: true,
      rmanagerRules: {
        name: [
          { required: true, message: "请输入用户名称", trigger: "change" },
        ],
        mobile: [
          {
            required: true,
            validator: (rule, value, callback) => {
              var reg = /^1[3456789]\d{9}$/;
              if (!reg.test(value)) {
                return callback(new Error("手机号格式不正确"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
        receivers: [
          { required: true, validator: picValidator, trigger: "change" },
        ],
        market_role_id: [
          { required: true, validator: picValigangwei, trigger: "change" },
        ],
        user_id: [
          { required: true, message: "请输入关联用户id", trigger: "change" },
        ],
      },
      provinceList: [], // 省份列表
      cityList: [], // 城市列表
      addressshow: {},
      mansgerform: {
        name: "",
        mobile: null,
        user_id: "", //绑定用户id
        market_role_id: "", //岗位级别
        province_id: "",
        city_id: "",
      },
    };
  },
  created() {
    var _this = this;
    _this.getroleList(); //角色列表
    _this.loading = true;
    if (_this.managerformdata) {
      _this.mansgerform = _this.managerformdata;
      _this.id = _this.managerformdata.id;
    }
    if (localStorage.getItem("region")) {
      _this.provinceList = JSON.parse(localStorage.getItem("region"));
    } else {
      getRegionList().then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
        }
        _this.provinceList = res.data;
        localStorage.setItem("region", JSON.stringify(res.data));
      });
    }
  },
  methods: {
    // 获取岗位级别
    getroleList() {
      rolelist(this.roleForm).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          return;
        }
        this.SupplierList = res.data.list;
      });
    },
    //选择省份
    provinceWay(val) {
      let cityshow = val;
      if (cityshow != this.addressshow.province_id) {
        this.mansgerform.city_id = "";
      }
      this.cityList = [];
      this.provinceList.forEach((item) => {
        if (item.id == val) {
          this.mansgerform.city_id = 0;
          this.cityList = item.children;
        }
        this.$forceUpdate();
      });
    },

    // 提交
    submitForms() {
      this.$refs.refmanager.validate((valid) => {
        if (valid) {
          if (this.id) {
            //编辑
            addMansger(this.mansgerform).then((res) => {
              if (res.code !== 200 || res.status !== 1) {
                return this.$messages.error(res.msg);
              }
              this.$messages.success("编辑成功");
              this.closemansger();
            });
          } else {
            addMansger(this.mansgerform).then((res) => {
              if (res.code !== 200 || res.status !== 1) {
                return this.$messages.error(res.msg);
              }
              this.$messages.success("添加成功");
              this.closemansger();
            });
          }
        } else {
          return false;
        }
      });
    },
    //取消按钮
    closemansger() {
      this.$refs.addmanager.closeDrawer();
      setTimeout(() => {
        this.$parent.closedetails();
      }, 500);
    },

    //关闭抽屉
    closedinvitation() {
      this.$parent.closedetail();
    },
  },
};
</script>
<style lang="scss" >
.drawer-layouts {
  /*1.显示滚动条：当内容超出容器的时候，可以拖动：*/
  .el-drawer__body {
    overflow: auto;
  }

  /*2.隐藏滚动条，太丑了*/
  .el-drawer__container ::-webkit-scrollbar {
    display: none;
  }

  .el-drawer__header {
    background-color: #409eff;
    color: #ffffff;
    padding: 10px 20px;
    margin-bottom: 10px;
  }
}
</style>

<style lang="scss" scoped>
</style>
